<template>
	<view>
		<view class="header flex-column align-center justify-center">
			<view class="w-full mb-30 flex-row align-center justify-between">
				<view class="search flex-row align-center justify-between" style="width: 80%;">
					<view class="flex-row align-center">
						<u-icon name="search" size="24"></u-icon>
						<view class="gray-color small-size">
							运单号查询/关键字牵引
						</view>
					</view>
					<view class="">
						<u-tag text="搜索" shape="circle" size="large" color="#fff" bgColor="#FC3F39"
							borderColor="#FC3F39"></u-tag>
					</view>
				</view>
				<view class="small-size flex-column align-center justify-center" style="color: #fff;">
					<u-icon name="grid" color="#fff" size="32"></u-icon>
					<view class="">
						自寄码
					</view>
				</view>
			</view>
			<view class="flex-row justify-between card p-30 w-full">
				<view class="flex-sub flex-row align-center justify-center w-full">
					<view class="mr-10">
						<view class="size fw-700 ">
							寄快递
						</view>
						<view class="small-size gray-color mt-10">
							一小时取件
						</view>
					</view>
					<u-image src="/static/uview/common/logo.png" mode="widthFix" width="80" height="80"
						radius="10"></u-image>
				</view>
				<view class="flex-sub flex-row align-center justify-center w-full">
					<view class="mr-10">
						<view class="size fw-700">
							扫码寄件
						</view>
						<view class="small-size gray-color mt-10">
							二维码下单/查件
						</view>
					</view>
					<u-image src="/static/uview/common/logo.png" mode="widthFix" width="80" height="80"
						radius="10"></u-image>
				</view>
			</view>
		</view>
		<view class="">
			<view class="tabs">
				<u-tabs :list="list1" lineColor="#FC3F39" :activeStyle="{
				    color: '#303133',
				    fontWeight: 'bold',
				    transform: 'scale(1.25)'
				}"></u-tabs>
			</view>
			<view class="p-30">
				<view class="card p-30" :class="{'mt-30':index != 0}" v-for="(item,index) in 4">
					<view class="item-header small-size gray-color">
						订单号：CX24059776634332434
					</view>
					<view class="item-content mt-30 mb-30">
						<view class="flex-row align-center justify-around">
							<view class="">
								<view class="size">
									贵阳市
								</view>
								<view class="small-size gray-color">
									李林
								</view>
							</view>
							<view class="flex-column align-center">
								<view class="size">
									-
								</view>
								<view class="small-size gray-color">
									已取消
								</view>
							</view>
							<view class="">
								<view class="size">
									贵阳市
								</view>
								<view class="small-size gray-color">
									李林
								</view>
							</view>

						</view>
						<view class="mt-30 small-size gray-color">
							取消时间：2022-06-21 15:35
						</view>
					</view>
					<view class="item-bottom flex-row justify-end">
						<view>
							<u-button shape="circle" type="info" size="small" :plain="true" text="删除"></u-button>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list1: [{
					name: '寄件',
					badge: {
						value: 18,
					}
				}, {
					name: '收件',
					badge: {
						value: 12,
					}
				}, {
					name: '待支付',
					badge: {
						value: 0,
					}
				}]
			};
		}
	}
</script>

<style lang="scss">
	.header {
		min-height: 300rpx;
		background-color: #FC3F39;
		padding: 30rpx;
		box-sizing: border-box;
	}

	.search {
		background-color: #fff;
		border-radius: 60rpx;
		padding: 10rpx;
	}

	.tabs {
		background-color: #fff;
		padding: 20rpx;
	}
</style>